<template>
  <div>
    <el-card shadow="false" class="box-card">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <div class="text item">
        <el-row :gutter="24">
          <el-col :span="4"
            ><span>商品名称: </span
            ><el-input
              style="width: 160px"
              v-model="form.name"
              placeholder="商品名称/模糊查询"
            ></el-input
          ></el-col>
          <el-col :span="4"
            ><span>商品货号: </span
            ><el-input
              style="width: 160px"
              v-model="form.id"
              placeholder="商品货号"
            ></el-input
          ></el-col>
          <el-col :span="4"
            ><span>选择品牌: </span>
            <el-select
              style="width: 160px"
              v-model="form.brandId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in brandlist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4"
            ><span>上架状态: </span>
            <el-select
              style="width: 160px"
              v-model="form.publishStatus"
              placeholder="请选择"
            >
              <el-option
                v-for="item in uplist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4"
            ><span>状态: </span>

            <el-select v-model="form.verifyStatus" placeholder="请选择">
              <el-option
                v-for="item in shenhelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-button size="small" @click="reseve">重置</el-button>
            <el-button size="small" @click="search" type="primary"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card shadow="false" class="box-card">
      <div slot="header" class="clearfix">
        <el-button size="small" @click="addGoods" type="primary"
          >新增</el-button
        >
      </div>
      <div class="text item">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="date"
            label="商品图片"
            width="180"
          >
            <template slot-scope="scope">
              <img
                style="width: 100px; height: 100px"
                :src="scope.row.pic"
                alt="" /></template
          ></el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="商品名称"
            width="180"
          ></el-table-column>
          <el-table-column align="center" prop="address" label="商品价格">
            <template slot-scope="scope"
              ><p>原价: {{ scope.row.originalPrice }}</p>
              <p>现价: {{ scope.row.price }}</p></template
            ></el-table-column
          >
          <el-table-column
            align="center"
            prop="productCategoryName"
            label="商品类别"
          ></el-table-column>
          <el-table-column align="center" prop="address" label="商品标签">
            <template slot-scope="scope">
              <div>
                <span>最新: </span
                ><el-switch
                  v-model="scope.row.newStatus"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#eee"
                  @change="change('newStatus', 'switchNewStatus', scope.row)"
                >
                </el-switch>
              </div>
              <div style="margin-top: 10px">
                <span>推荐: </span
                ><el-switch
                  v-model="scope.row.recommendStatus"
                  active-color="#13ce66"
                  inactive-color="#eee"
                  :active-value="1"
                  :inactive-value="0"
                  @change="
                    change(
                      'recommendStatus',
                      'switchRecommandStatus',
                      scope.row
                    )
                  "
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="商品标签2">
            <template slot-scope="scope">
              <div>
                <span>发布: </span
                ><el-switch
                  v-model="scope.row.publishStatus"
                  active-color="#13ce66"
                  inactive-color="#eee"
                  :active-value="1"
                  :inactive-value="0"
                  @change="
                    change('publishStatus', 'switchPublishStatus', scope.row)
                  "
                >
                </el-switch>
              </div>
              <div style="margin-top: 10px">
                <span>审核: </span
                ><el-switch
                  v-model="scope.row.verifyStatus"
                  active-color="#13ce66"
                  inactive-color="#eee"
                  :active-value="1"
                  :inactive-value="0"
                  @change="
                    change('verifyStatus', 'switchVerifyStatus', scope.row)
                  "
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="SKU">
            <template slot-scope="scope">
              <el-button size="small" @click="editSku(scope.row)" type="primary"
                >编辑SKU</el-button
              ></template
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="weight"
            label="重量"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="lowStock"
            label="排序"
          ></el-table-column>
          <el-table-column align="center" prop="address" label="编辑">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="editGoods(scope.row.id)"
                type="primary"
                >编辑</el-button
              >
              <el-button size="small" @click="delGoods(scope.row)" type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        @limitfather="limitchange"
        @startfather="startchange"
        :totalNumber="totalNumber"
      ></pagination>
    </el-card>

    <addGoods ref="son"></addGoods>
  </div>
</template>

<script>
import goodsApi from "@/api/goods/goodsList/index";
import brandApi from "@/api/goods/brand/index";
import addGoods from "@/components/goods/addGoods";
import pagination from "@/components/common/pagination";
export default {
  components: { addGoods, pagination },

  data() {
    return {
      brandlist: [],
      tableData: [],
      totalNumber: 0,
      uplist: [
        {
          name: "未上架",
          id: 0,
        },
        {
          name: "已上架",
          id: 1,
        },
      ],
      shenhelist: [
        {
          name: "未审核",
          id: 0,
        },
        {
          name: "已审核",
          id: 1,
        },
      ],
      brand: "",
      start: 1,
      limit: 10,
      form: {
        brandId: "",
        id: "",
        name: "",
        productCategoryId: "",
        productSn: "",
        publishStatus: "",
        verifyStatus: "",
      },
      newdate: "",
      recommend: "",
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 来自子组件切换limit
    limitchange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 来自子组件切换start
    startchange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },

    // 新增商品
    addGoods() {
      this.$router.push({ name: "addDetail" });
    },
    // 商品切换最新,推荐,审核,发布
    change(sort, type, item) {
      console.log(item);
      console.log(type);
      let status = !item[sort];
      goodsApi[type]({
        productId: item.id,
        status: Number(item[sort]),
      }).then((res) => {
        if (res.success) {
          this.$message({
            message: "切换成功",
            type: "success",
          });
        } else {
          item[sort] = Boolean(status);
          this.$message.error(res.message);
        }
      });
    },

    // 重置
    reseve() {
      this.form.brandId = "";
      this.form.id = "";
      this.form.name = "";
      this.form.productCategoryId = "";
      this.form.productSn = "";
      this.form.publishStatus = "";
      this.form.verifyStatus = "";
      this.init();
    },
    // 搜索
    search() {
      this.start = 1;
      this.limit = 4;
      this.init();
    },
    // 编辑sku
    editSku(item) {
      this.$refs.son.change(item.id);
      // goodsApi.productSkusDetail(item.id).then((res) => {
      //   console.log(res);
      // });
    },
    // 编辑商品
    editGoods(item) {
      this.$router.push({ name: "addDetail", query: { goodsid: item } });
    },
    // 删除是商品
    delGoods(data) {
      console.log(data);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        goodsApi.del(data.id).then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    // 获取品牌与商品信息
    init() {
      brandApi.findAllBrand().then((res) => {
        console.log(res);
        this.brandlist = res.data.items;
      });
      goodsApi.productsByPage(this.start, this.limit, this.form).then((res) => {
        console.log(res);
        // res.data.rows.forEach((el) => {
        //   el.newStatus = Boolean(el.newStatus);
        //   el.recommendStatus = Boolean(el.recommendStatus);
        //   el.publishStatus = Boolean(el.publishStatus);
        //   el.verifyStatus = Boolean(el.verifyStatus);
        // });
        this.tableData = res.data.rows;
        this.totalNumber = res.data.total;
      });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
}
</style>